import {Wrapper, HomeworkWrapper} from "./style";
import blank from "@/static/imgs/courseContent/blank.png";
import {Button} from "antd";
import {useNavigate} from "react-router-dom";
import {useContext, useEffect, useState} from "react";
import {CourseContext} from "@/pages/StudentCourseContent/context/CourseContext.ts";
import {getHomework} from "@/api/student/homeworkApi.ts";
import dayjs from "dayjs";


const Homework = () => {
    const courseContext = useContext(CourseContext)

    const navigate = useNavigate()

    const [homeworkList, setHomeworkList] = useState([])

    useEffect(() => {
        getHomework(courseContext).then(res => {
            setHomeworkList(res.data.data)
        })
    }, [])

    const Homework = ({homeworkId, title, type, typeLabel, deadline, isSubmit, score}: any) => {
        return (
            <HomeworkWrapper>
                <div className="content">
                    <div className="left">
                        <img src="https://www.ketangpai.com/images/web2x_zuoye.png" alt=""/>
                        <div className="another-name">{typeLabel}</div>
                    </div>
                    <div className="right">
                        <div className="info">
                            <div className="title">{title}</div>
                            <div className="sub-bar">
                                <span>提交截止时间：{dayjs(deadline).format("YYYY/MM/DD : HH:mm")}</span>
                                <div className='divider'></div>
                                <span>{type}</span>
                            </div>
                            <div className="state">
                                <span>{isSubmit ? score == null ? '已提交' : `已批改${score}分` : '未提交'}</span>
                                {/*<span>{isSubmit ? `已批改${score}分` : '未提交'}</span>*/}
                            </div>
                        </div>
                        {
                            isSubmit || <div className="function">
                                    <Button type='primary' onClick={() => {
                                        navigate('/studentHomeworkDetail/' + courseContext + "/" + homeworkId)
                                    }}>提交作业</Button>
                                </div>
                        }
                    </div>
                </div>
            </HomeworkWrapper>
        )
    }

    return (
        <Wrapper>
            <div className="top flex">
                <div className="left flex">
                    <div>共</div>
                    <div>{homeworkList.length}</div>
                    <div>个活动</div>
                </div>
            </div>
            <div className="content">
                <div className="homework-list">
                    {
                        homeworkList.map((item: any) => {
                            return <Homework key={item.id} {...item}/>
                        })
                    }
                </div>
                {
                    homeworkList.length === 0 && <div className="no-data">
                            <img src={blank} alt=""/>
                            <div>暂无数据</div>
                        </div>

                }
            </div>
        </Wrapper>
    )
}
export default Homework;